import React, { PureComponent } from 'react';
import { HomeWrapper, HomeLeft, HomeRight, BackTop } from './style';
import List from './components/List';
import Recommend from './components/Recommend';
import Topic from './components/Topic';
import Writer from './components/Writer';
import { connect } from 'react-redux';
import { actionCreators } from './store';

class Home extends PureComponent {
    constructor(props){
        super(props);
        this.newBindEvent=this.throttle();
    }
    getShowTOP() {
        let timer=null;
        const handleClick = () => {
            clearInterval(timer);
            timer=setInterval(()=>{
                if(document.documentElement.scrollTop>0){
                    document.documentElement.scrollTop-=10;
                } 
                else {
                    document.documentElement.scrollTop=0;
                    clearInterval(timer);
                }
            },20)
        }
        if (this.props.showTop) {
            return (
                <BackTop onClick={handleClick}>顶部</BackTop>
            )
        }
    }
    render() {
        return (
            <HomeWrapper>
                <HomeLeft>
                    <img src="https://bpic.588ku.com/element_banner/20/21/03/6a16911037bcd02b8f462e9ad47a238a.jpg!/unsharp/true/compress/true"
                        className="banner-img" alt=""></img>
                    <Topic></Topic>
                    <List></List>
                </HomeLeft>
                <HomeRight>
                    <Recommend></Recommend>
                    <Writer></Writer>
                </HomeRight>
                {this.getShowTOP()}
            </HomeWrapper>
        )
    }
    // 在组件加载后获取首页数据，绑定滚动事件，当页面滚动大于100时显示“返回顶部”组件
    // throttle(fn,delay=100){
    //     let timer=null;
    //     return function(){
    //         if (timer){
    //             return
    //         }
    //         timer=setTimeout(()=>{
    //             fn.apply(this,arguments);
    //             timer=null;
    //         },delay)
    //     }
    // }
    throttle(){
        let timer=null;
        let fn=this.props.bindEvent;
        return function(){
            if (timer){
                return
            }
            timer=setTimeout(()=>{
                fn();
                timer=null;
            },500)
        }
    }
    componentDidMount() {
        this.props.getData();
        window.addEventListener('scroll', this.newBindEvent, false)
    }
    // 关闭页面后销毁绑定的滚动事件
    componentWillUnmount(){
        window.removeEventListener('scroll', this.newBindEvent)
    }
}
const mapStateToProps = (state) => {
    return {
        showTop: state.get('home').get('showTop')
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        getData() {
            const action = actionCreators.homeDataAction();
            dispatch(action)
        },
        bindEvent() {
            if (window.scrollY > 100) {
                const action = actionCreators.changeShowTop(true);
                dispatch(action);
                console.log('scroll');
            } else {
                const action = actionCreators.changeShowTop(false);
                dispatch(action)
            }
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);